﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Model 的定义及 AJAX 交互</title>
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/reset.css" />
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/960.css" />    
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/text.css" />
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/layout.css" />
    <link media="all"  type="text/css" rel="Stylesheet"  href="Styles/nav.css" />

    <script type="text/javascript" src="Scripts/Libs/jquery-1.8.3.min.js"></script>
     <script type="text/javascript" src="Scripts/Libs/underscore.js"></script>
      <script type="text/javascript" src="Scripts/Libs/backbone.0.9.9.js"></script>
</head>
<body>
   <div class="container_16">
            <div class="grid_16">
				<h2 id="page-heading">Backbone.js Demo</h2>
			</div>
            <div class="clear"></div>
            <div class="grid_4 alpha">&nbsp;</div>
            <div class="grid_8">
            <div class="box">
					<h2>
						注册
					</h2>
					<div style="margin: 0px; position: static; overflow: hidden;"><div id="login-forms" class="block" style="margin: 0px;">
						

                            <fieldset>
								<legend>注册信息</legend>
                                <p></p>
								<p>
									<label>用户名： </label>
									<input type="text" value="" id="UserName" name="UserName">
								</p>
								<p>
									<label>登陆账号 : </label>
									<input type="text" value="" id="LoginID" name="LoginID">
								</p>
								<p>
									<label>密码： </label>
									<input type="text" value=""  id="PWD" name="PWD">
								</p>
								<p>
									<label>密码确认 : </label>
									<input type="text" value="" id="PWDC" name="PWDC">
								</p>
								<p>
									<label>公司： </label>
									<input type="text" value="" id="Company"   name="Company">
								</p>						
							<p>
									<label>Email 地址： </label>
									<input type="text" value="" id="Email" name="Email">
								</p>
								<input type="submit" class="register-button" id="btnRegister" value="注册">
							</fieldset>
						
					</div></div>
				</div>
            </div>
            <div class="grid_4"></div>
   </div>

   <script type="text/javascript">
       $(document).ready(function () {

           /// 该Demo 只演示 Backbone 中的 Model 定义和 Ajax 交互           
           /// 开发：余庆元  
           /// 定义一个用户实体
           var user = Backbone.Model.extend({
               url: 'Ajax/Ajax_register.ashx',  //用户提交服务器，采用传统 ashx 一般程序处理文件作交换
               initialize: function () { //构造函数，初始化 
                   //0.9.9 是用 error， 0.9.10 是 invalid
                   this.on("error", function (model, error) {
                       alert(error);
                       return false;
                   });
               },
               defaults: { //实体属性定义
                    ID:'',
                   UserName: '',
                   LoginID: '',
                   PWD: '',
                   Company: '',
                   Email: ''
               },
               //规则校验
               validate: function (attributes) {
                   if (attributes.UserName == '') {
                       return "用户名不能为空！";
                   };

                   if (attributes.LoginID == '') {
                       return "登录账号不能为空！"
                   };

                   if (attributes.PWD == '') {
                       return "密码不能为空！"
                   }
               },
               //自定义方法
               register: function () {
                   this.save(); //保存实体 save 为backbone自带方法。
               }

           });

           //jquery 事件触发
           $("#btnRegister").click(function () {
               var regUser = new user;
               regUser.set("UserName", $("#UserName").val());
               regUser.set("LoginID", $("#LoginID").val());
               regUser.set("PWD", $("#PWD").val());
               regUser.set("Company", $("#Company").val());
               regUser.set("Email", $("#Email").val());

               if ($("#PWD").val() != $("#PWDC").val()) {
                   alert("密码确认不一致！");
                   return false;
               } else {
                   regUser.save();
               };


//                              $.post("Ajax/Ajax_register.ashx", { UserName: $("#UserName").val(), LoginID: $("#LoginID").val(), PWD: $("#PWD").val(), Company: $("#Company").val(), Email: $("#Email").val() },
//                              function (data) {
//                                  alert("Data Loaded: " + data);
//                              });

//                              var jsondata = { UserName: $('#UserName').val(), LoginID: $('#LoginID').val(), PWD: $('#PWD').val(), Company: $('#Company').val(), Email: $('#Email').val() }
//                              $.ajax({
//                                  type: "POST",
//                                  contentType: "application/json",
//                                  url: "Ajax/Ajax_register.ashx",
//                                  data: jsondata,
//                                  dataType: "json",
//                                  success: function (msg) {
//                                      alert("Data Saved: " + msg);
//                                  }
//                              });



           });

       });

   </script>

</body>
</html>
